<template>
	<view>
		<navbar :isback="true" title="个人信息"></navbar>
		<view class="item item1">
			<view class="item__label">
				头像
			</view>
			<button class="item__tx" open-type="chooseAvatar" @chooseavatar='chooseavatar'>
				<u-avatar :src="URL(form.avatar)" shape="circle" size="98rpx"></u-avatar>
			</button>
		</view>
		<form class="" @submit="formSubmit">
			<view class="item">
				<view class="item__label">
					我的昵称
				</view>
				<input class="item__inp" type="nickname" placeholder="昵称" name="username" v-model="form.username" />
				<u-icon name="/static/my/right.png" size="30rpx"></u-icon>
			</view>
			<view class="item">
				<view class="item__label">
					我的电话
				</view>
				<input class="item__inp" disabled v-model="form.mobile" />
				
				<u-icon name="/static/my/right.png" size="30rpx"></u-icon>
			</view>
			<view class="footer">
				<button class="btn" form-type="submit">确认保存</button>
			</view>
		</form>
		<view class="kf">
			<button class="u-reset-button" open-type="contact">
				<image src="/static/xishi/kf.png" class="kficon" mode=""></image>
			</button>
		</view>
		<u-picker :show="show" ref="uPicker" :loading="loading" @close='show=false' keyName='address'
			@cancel='show=false' :columns="columns" @change="changeHandler" :defaultIndex='[0,0]'
			@confirm='confirm'></u-picker>
		<!-- <selector-component :show="selectorVisible" key="57FBZ-TADRI-CVXGU-UXQO3-MWUTZ-64FBA" referer="" hotCitys=""
			@select="onSelectCity"></selector-component> -->
			
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/api/config.js'
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				form: {
					"username": "",
					"avatar": "",
					"mobile": ""
				},
				show: false,
				loading: false,
				columns: [
					[],
					[]
				],
				app_id: 'eblisjqrj1vnuokq',
				app_secret: 'tNDAG5IuYKbFSCiZx1K7GRnXUo3p1jNk',
				isok:false
			};
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					
					console.log(this.columns[0][index].address=="重庆")
					if(this.columns[0][index].address=="北京"||this.columns[0][index].address=="上海"||this.columns[0][index].address=="天津"||this.columns[0][index].address=="重庆"){
						picker.setColumnValues(1, [])
						this.columns[1] = []
					}else{
						this.columns[1] = this.columns[0][index].districts
						picker.setColumnValues(1, this.columns[0][index].districts)
					}
					
					this.getNewcityList()
				}
			},
			clickshow() {
				this.show = true
				this.getcitylist()
			},
			confirm(e) {
				this.form.address = e.value[0].address + e.value[1].address
				// this.getNewList(e.value[0].name)
				this.show = false

			},
			getNewList() {
				let picker = this.$refs.uPicker
				this.columns[0].forEach((item, index) => {
					let isAutonomy = item.name.search('自治区') != -1
					if (isAutonomy) {
						item.address = item.name.search('内') != -1 ? item.name.substr(0, 3) : item.name.substr(0,
							2)
					} else {
						item.address = item.name.match(/(\S*)(省|市|特别行政区)/)[1];
					}
				});
				picker.setColumnValues(0, this.columns[0])
			},
			getNewcityList(index) {
				let picker = this.$refs.uPicker
				this.columns[1].forEach((item, index) => {
					if(item.name.match(/(\S*)(市|林区|地区|盟|县)/)&&!item.name.match(/(\S*)(重庆)/)){
						item.address = item.name.match(/(\S*)(市|林区|地区|盟|县)/)[1]
					}else if(item.name.match(/(\*S)(香港)/)){
						item.address = item.name.match(/(\S*)(区)/)[1]
					}else{
						item.address=item.name
					}
					
				});
				picker.setColumnValues(1, this.columns[1])
			},
			getcitylist() {
				let _this = this
				_this.loading = true
				const picker = this.$refs.uPicker
				uni.request({
					url: 'https://restapi.amap.com/v3/config/district',
					method: "GET",
					data: {
						keywords: '中国',
						key: '0d6b8b2210c6981027b6bf8a885172e9',
						subdistrict: 2
					},
					success(res) {
						console.log(res)
						_this.columns[0] = res.data.districts[0].districts
						_this.getNewList()
						_this.columns[1] = _this.columns[0][0].districts
						picker.setColumnValues(1, _this.columns[0][0].districts)
						_this.getNewcityList()
						_this.loading = false
					}
				})
			},
			chooseavatar(e) {
				let _this = this
				uni.getImageInfo({
					src: e.detail.avatarUrl,
					success: function(sres) {
						//上传图片
						uni.uploadFile({
							url: BASE_URL + '/api/Common/upload',
							filePath: sres.path,
							name: "file",
							header: {
								"token": uni.getStorageSync('xxcstoken')
							},
							success: function(res) {
								if (JSON.parse(res.data).code == 1) {
									uni.$u.toast('上传成功')
									_this.form.avatar = JSON.parse(res.data).data.url
								} else {
									uni.$u.toast('上传失败')
								}
							},
							error: function(rev) {
								console.log(rev);
							}
						});
					},
					fail: function(srev) {
						console.log(srev);
					}
				});
			},
			formSubmit(e) {
				let d = e.detail.value
				this.form.username = d.username
				if(!this.form.avatar){
					uni.$u.toast('请上传头像')
					return
				}
				if (!d.username) {
					uni.$u.toast('请输入昵称')
					return
				}
				// console.log(this.form)
				user.profile(this.form).then(res => {
					if (res.data.code == 1) {
						uni.$u.toast('保存成功')
						user.userinex().then(r => {
							if (r.data.code == 1) {
								this.$store.commit('getuserinfo', r.data.data)
								this.isok=true
								uni.navigateBack()
							}
						})
					}
				})
			},
		},
		onLoad() {
			this.form.mobile=this.$store.state.userinfo.mobile
			// for (let key in this.form) {
			// 	this.form[key] = this.$store.state.userinfo[key]
			// }
		},
		onUnload() {
			if(!this.isok){
				uni.removeStorageSync('xxcstoken')
				this.$store.commit('getuserinfo', {})
			}
			
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 50rpx 22rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__label {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			width: 200rpx;
			line-height: 30rpx;
		}

		&__tx {
			border: 4rpx solid #a4d3fe;
			border-radius: 50%;
			width: 98rpx;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
		}

		&__inp {
			text-align: right;
			flex: 1;
			font-size: 30rpx;
			color: #000;
			margin-right: 10rpx;
		}
	}

	.item1 {
		padding: 64rpx 22rpx 30rpx;
	}

	.footer {
		padding: 100rpx 50rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 650rpx;
	}

	uni-button {
		margin: 0;
	}

	.btn {
		width: 649rpx;
		height: 114rpx;
		background: linear-gradient(91deg, #6E77FA, #5E77FD);
		box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(57, 150, 252, 0.38);
		border-radius: 57rpx;
		font-family: AlibabaPuHuiTi_2_55_Regular;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>